
<style lang="less">
	
	page{
		background-color: #F7F7F7;
	}
	.main{
		padding: 50upx 30upx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 12upx;
		margin-top: 30upx;
	}
	
	.main_top{
		text-align: center;
		padding-bottom: 60upx;
		border-bottom: 1upx solid #D4D4D4;
		.mian_top_txt{
			font-size: 28upx;
			font-weight: 500;
			color: #999999;
			line-height: 34upx;
			margin-bottom: 30upx;
			margin-top: 20upx;
		}
	}
	.nums{
		font-size: 40upx;
		font-family: "DINCond";
		font-weight: 400;
		color: #333333;
		line-height: 48upx;
		.price{
			font-size: 60upx;
			margin-left: 10upx;
		}
	}
	.foot{
		padding-top: 50upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.foot_list{
			text-align: center;
		}
		.foot_list_txt{
			margin-top: 30upx;
			font-size: 24upx;
			font-weight: 500;
			color: #999999;
			line-height: 34upx;
		}
		.wenhao{
			background: url('https://static.xpandago.net/wechat/images/wenhao-ing.png') no-repeat right center;
			background-size: 30upx;
		}
		.line{
			width: 1upx;
			height: 64upx;
			background: #DDDDDD;
		}
	}
	.main_btn{
		display: flex;
		justify-content: space-between;
		margin-top: 56upx;
		.main_btn-list{
			width: 48%;
			border-radius: 40upx;
			font-size: 30upx;
			font-weight: 500;
			height: 80upx;
			background: #070506;
			color: #FFFFFF;
			line-height: 80upx;
			text-align: center;
		}
	}
	.main-cen{
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 30upx;
		.main-cen-tltle{
			text-align: center;
			font-size: 32upx;
			color: #333333;
			padding: 30upx 0;
		}
		.main-cen-list{
			display: flex;
			justify-content: space-between;
			border-top: 1upx solid #D4D4D4;
			align-items: center;
			padding: 30upx 0;
			.main-cen-list-fl-top{
				font-size: 26upx;
				color: #333333;
			}
			.main-cen-list-fl-bot{
				font-size: 22upx;
				color: #999999;
				margin-top: 10upx;
			}
			.main-cen-list-fr{
				font-size: 40upx;
				font-family: 'DINCond';
				color: #333333;
			}
		}
	}
	
	
	// 底部弹框
	  .over_model{
	    width: 100%;
	    height: 100%;
	    z-index: 1001;
	    background: #000000;
	    left: 0;
	    top: 0;
	    opacity: 0.4;
	    position: fixed;
	    display: none;
	  }
	  .panle_model {
	    // box-shadow:0px -4upx 10upx #9f9f9f;
	    position:fixed;
	    height:auto;
	    width:100%;
	    z-index:1002;
	    background:#fff;
	    bottom:0;
	    border-radius:25upx 25upx 0 0;
	    display:none;
	  }
	  .model_content {padding:30upx;position:relative;}
	  .model_content.test{
	    padding:30upx;
	  }
	  .groupPh-title{
	    font-size:34upx;
	    font-weight:bold;
	    color:rgba(51,51,51,1);
	    line-height:50upx;
	    text-align: center;
	  }
	  .groupPh{
	    margin-top: 30upx;
	    .groupPh-main{
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	      padding: 30upx 0;
	      border-bottom: 1upx solid #ededed;
	      .groupPh-main-fl{
	        font-size:30upx;
	        font-weight:500;
	        color:rgba(51,51,51,1);
	        line-height:40upx;
	      }
	      .slide-image{
	        width: 18upx;
	        height: auto;
	      }
	    }
	    .groupPh-main:last-child{
	      border: none;
	    }
	  }
	  .comfire_btn {
	    position: absolute;
	    left: 0;
	    bottom:0;
	    width: 100%;
	    height:98upx;
	    background:rgba(7,5,6,1);
	    line-height:98upx;
	    text-align:center;
	    color:rgba(255,255,255,1);
	    font-size:36upx;
	    }
	  .colse_model {position:absolute;right:30upx;top:30upx;}
	  .colse_model image {width:30upx;}
	  .hidden {display:block;}
	  .uni-loadmore{
		  font-size: 24upx;
		  font-weight: 500;
		  color: #333333;
		  margin-top: 100upx;
	  }
</style>


<template>

	<view>
		<view class="main">
			<view class="main_top">
				<view class="nums"><text>¥ </text><text class="price">{{dataTop.marketing}}</text></view>
				<view class="mian_top_txt">账户余额</view>
			</view>
			<view class="foot">
				<view class="foot_list">
					<view class="nums"><text>¥ </text><text class="price">{{dataTop.addMarket}}</text></view>
					<view class="foot_list_txt">累计转入</view>
				</view>
				<view class="line"></view>
				<view class="foot_list">
					<view class="nums"><text>¥ </text><text class="price">{{dataTop.marketed}}</text></view>
					<view class="foot_list_txt">已使用</view>
				</view>
				<view class="line"></view>
				<view class="foot_list" @tap="wenhaoTap">
					<view class="nums"><text>¥ </text><text class="price">{{dataTop.locked}}</text></view>
					<view class="foot_list_txt wenhao">锁定中</view>
				</view>
			</view>
			<view class="main_btn">
				<view class="main_btn-list" @tap="tapShow">转入</view>
				<view class="main_btn-list"  @tap="tapInfo(3,allZc)">转出</view>
			</view>
			
		</view>
		<view class="main-cen">
			<view class="main-cen-tltle">明细</view>
			<view class="main-cen-list" v-for="(v,i) in list" :key="i">
				<view class="main-cen-list-fl">
					<view class="main-cen-list-fl-top">{{v.remark}}</view>
					<view class="main-cen-list-fl-bot">{{v.creatTime}}</view>
				</view>
				<view class="main-cen-list-fr">{{v.priceCurrent}}</view>
			</view>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		
		<!-- //选择物流弹出-->
		<view class="over_model" :class="{hidden:hidden}" @tap="closeModel"></view>
		<view class="panle_model" :class="{hidden:hidden}">
		  <view class="model_content">
		    <view class="groupPh-title">选择转入账户</view>
		    <view class="groupPh">
		      <view class="groupPh-main" @tap="tapInfo(1,dataTop.balance)">
		        <view class="groupPh-main-fl">从收益账户（￥{{dataTop.balance}}）转入</view>
				<image src="https://static.xpandago.net/wechat/images/right_fh.png"  class="slide-image" mode="widthFix"/>
		      </view>
			  <view class="groupPh-main" @tap="tapInfo(2,dataTop.giftAmount)">
			    <view class="groupPh-main-fl">从充值余额（￥{{dataTop.giftAmount}}）转入</view>
				<image src="https://static.xpandago.net/wechat/images/right_fh.png"  class="slide-image" mode="widthFix"/>
			  </view>
		    </view>
		    <view class="colse_model" @tap="closeModel"><image class="goods_img" src="https://static.xpandago.net/wechat/images/ic_login_close.png" mode="widthFix"/></view>
		  </view>
		</view> 
	</view>

</template>

<script>
	import api from '@/common/api';
  export default {

    components: {},

    data () {

      return {
		  dataTop:{},
		  allZc:0,
		  list:[],
		  hidden: false,
		  token: '',
		  page:1,
		  loadMoreText: "加载中...",
		  showLoadMore: false,
		  totalPage:'',//总页数
	  }
    },
	onShow(){
		this.token = uni.getStorageSync('token')
		this.marketingmsg()
	},
	onLoad() {
	},
    methods: {
		tapShow(){
			this.hidden = true;
		},
		//关闭弹窗
		closeModel(){
		 this.hidden = false;
		},
		wenhaoTap(){
			let centent='店长创建优惠券后会根据优惠券的金额和数量，从账户余额中扣除并锁定，待店铺粉丝使用时会消耗锁定中的金额；若优惠券失效，会将锁定中的金额返还到账户余额；提前结束发劵时，未被领取的优惠券金额也将返还至余额。'
			uni.showModal({
			  title: '什么是锁定金额？',
			  content: centent,
			  showCancel: false, // 是否显示取消按钮
			  confirmText:'我知道了',
			  success: function(res) {
			    if (res.confirm) {
			        // 确定按钮
			        // console.log(id)
			    } else if (res.cancel) {
			    }
			  }
			})
		},
		//头部接口
		async marketingmsg(){
			const [err, res] = await api.marketingmsg({
				 header:{
					'Content-Type': 'application/json',
					'token': this.token
				 }
			 });
			 if(res.data.code == 0){
				 this.dataTop=res.data.data
				 this.allZc=Number(res.data.data.marketing) - Number(res.data.data.locked)
				 this.page=1
				 this.list=[]
				 this.newList()
			 }
		},
		//列表
		async newList(){
			const [err, res] = await api.newList({
				query: {
					page: this.page,
					type: 6,
					limit: 10
				},
				 header:{
					'Content-Type': 'application/json',
					'token': this.token
				 }
			 });
			 if(res.data.code == 0){
				 this.list = [...this.list, ...res.data.data.list];
				  this.totalPage=res.data.data.totalPage
				  if(this.list.length==0){
				 	  this.loadMoreText = "暂时没有相关数据"
				 	 this.showLoadMore = true;
				 }else{
				 	this.showLoadMore = false; 
				 }
			 }
		},
		//页面跳转
		tapInfo(type,mony){
			this.hidden = false;
			uni.navigateTo({
				url:'/pages/newData/capitalAccountZr?type='+type+'&mony='+mony
			})
		}
	},
	onReachBottom() {
		this.showLoadMore = true;
		if (this.page >= this.totalPage) {
			this.loadMoreText = "没有更多数据了!"
			return;
		}else{
			setTimeout(() => {
				this.page++
				this.newList()
			}, 500);
		}
	}
  }
</script>